<template>
    <van-nav-bar title="会话" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="message-list" v-if="show == false">
        <div v-for="(item, index) in friends" :key="index" class="message" @click="toChat(item.friendId)">
            <img :src="item.friendAvatar" alt="User Avatar" class="avatar" />
            <div class="message-content">
                <p class="username">{{ item.friendNickname }}</p>
                <p class="text">朋友的id: {{ item.friendId }}</p>
            </div>
        </div>
    </div>
    <div v-else class="empty-message">
        <span style="font-size: 16px; text-align: center;">暂无消息</span>
    </div>

</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const onClickLeft = () => history.back();
import { ref, onMounted, type Ref, watch } from 'vue';
// @ts-ignore
import { useUserStore, useFriendListStore } from '@/stores/UserStore'
const useUser = useUserStore()
const useFriendList = useFriendListStore()

const friends: Ref<any> = ref([]);

const show: Ref<boolean> = ref(false)

onMounted(async () => {
    watch(
        () => useUser.$state.userObj.userId,
        async (newUserId) => {
            if (newUserId) {
                useFriendList.$state.friendList = [];
                // 防止重复加载好友列表
                if (!friends.value || friends.value.length === 0) {
                    await useFriendList.loadFriendList(() => {
                        if (useFriendList.$state.friendList.length === 0) {
                            show.value = true;
                        }
                        friends.value = useFriendList.$state.friendList;
                    });
                }
            }
        },
        { immediate: true }
    );

    // 直接监听friendList的变化
    watch(
        () => useFriendList.$state.friendList,
        (newFriendList) => {
            friends.value = useFriendList.$state.friendList;
            show.value = false;
            if (friends.value.length === 0) {
                show.value = true;
            }
        },
        { deep: true, immediate: true }
    );
});

const toChat = (friendId: string) => {
    router.push(`/my/session/${friendId}`);
}
</script>

<style scoped>
.message-list {
    display: flex;
    flex-direction: column;
}

.message {
    display: flex;
    align-items: center;
    margin-bottom: 0.1rem;
    background-color: #2fff89;
    height: 85px;
    /* 或您期望的高度值 */
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 1rem;
}

.message-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 1rem 0 0;
    /* 可以适当调整上下左右内边距 */
}

.username {
    font-weight: bold;
    /* 添加或调整字体大小 */
    font-size: 0.5rem;
    /* 或您期望的较小字号 */
}

.text {
    margin-top: 0.2rem;
    /* 添加或调整字体大小 */
    font-size: 0.3rem;
    /* 或您期望的较小字号 */
}

.date {
    margin-top: 0.1rem;
    font-size: 0.5rem;
}

.empty-message {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30vh;
    /* 调整高度以适应屏幕高度 */
}
</style>